<!--
 * @FileDescription: 时间轴
 * @Author:
 * @Date:
 * @LastEditors:
 * @LastEditTime:
 -->
<template>
  <div class="table-box timeline">
    <div class="card table-search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="查询时间:">
          <el-date-picker
            v-model="formInline.dataTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="查询内容:">
          <el-input v-model="formInline.content"></el-input>
        </el-form-item>
        <el-form-item label="是否高危:">
          <el-checkbox v-model="formInline.isHighRisk" class="m-2"></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card table-main">
      <el-timeline>
        <el-timeline-item
          :timestamp="item.time"
          placement="top"
          v-for="(item, index) in list"
          :key="index"
          :type="index === 2 ? 'danger' : 'success'"
        >
          <el-card>
            <h4>{{ item.content }}</h4>
            <p>Tom committed 2018/4/12 20:46</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import dayjs from "dayjs";
export default defineComponent({
  setup() {
    const list = ref([
      {
        content: "修改密码",
        time: "2018-04-12 20:46"
      },
      {
        content: "查询数据",
        time: "2019-05-01 20:46"
      },
      {
        content: "退出登录",
        time: "2020-06-06 20:46"
      },
      {
        content: "修改数据",
        time: "2021-08-01 20:46"
      },
      {
        content: "借阅流程",
        time: "2022-03-05 20:46"
      }
    ]);
    let formInline = reactive({
      dataTime: [] as any,
      content: "",
      isHighRisk: 2
    });
    const searchSubmit = () => {
      console.log(dayjs(formInline.dataTime[0]).format("YYYY-MM-DD"));
      console.log(dayjs(formInline.dataTime[1]).format("YYYY-MM-DD"));
    };
    return {
      list,
      formInline,
      searchSubmit
    };
  }
});
</script>

<style lang="less" scoped></style>
